<template>
	<coreshop-page :isBack="false" bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
		<view class="layout-home-page page-bg">
			<image class="home-bg" :src="handleStaticResources('/static/images/home-bg.jpg')"></image>
			<uv-navbar
				:bg-color="state.isScrollTop ? handleStaticResources('/static/images/home-bg.jpg') : 'rgba(0,0,0,0)'"
				imgMode="aspectFill">
				<template #left>
					<view class="search-box">
						<image class="logo" :src="handleStaticResources('/static/images/home-logo.png')"></image>
						<uv-input shape="circle" placeholder="请输入关键词" prefixIcon="search"
							:customStyle="{ 'background-color': '#fff' }"
							prefixIconStyle="font-size: 22px;color: #909399">
							<template #suffix>
								<view class="search-tit">搜索</view>
							</template>
						</uv-input>
					</view>
				</template>
			</uv-navbar>

			<view class="content-box p-25">
				<CustomPage :coreshopData="state.coreshopData"></CustomPage>
			</view>

			<!-- 备案信息 -->
			<coreshop-copyright></coreshop-copyright>

			<!-- 弹框广告 -->
			<HomeAdpop></HomeAdpop>
		</view>
	</coreshop-page>
</template>

<script setup lang="ts">
	import { onShow, onPageScroll, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { reactive } from 'vue';
	import { queryPageConfig, queryUserInfo } from '@/core/api';
	import type { Response, PageConfigType, PageConfigItemsType, UserInfoType } from '@/core/models';
	import CustomPage from '@/pages/components/custom-page/index.vue';
	import HomeAdpop from '@/pages/components/custom-page/components/home-adpop/home-adpop.vue';
	import { handleStaticResources, getDefaultShareData, getShareUrl } from '@/core/utils';
	import { UserToken, shareUrl, onHomePageShow } from '@/core/consts';
	import { useUserInfoStore } from '@/core/store';
	import { ShareClientEnum, ShareModelEnum, ShareEnum } from '@/core/enum';

	interface QueryParams {
		code : string;
	}

	/** 获取 用户数据 */
	const userInfoStore = useUserInfoStore();

	const state = reactive<{
		coreshopData : Array<PageConfigItemsType>;
		isScrollTop : boolean;
		shareUrl : string;
	}>({
		coreshopData: [],
		isScrollTop: false,
		shareUrl: "",
	})

	onShow(() => {
		/** 触发自定义onshow事件，让后代组件监听页面是都进入 */
		uni.$emit(onHomePageShow);
	})

	onPageScroll((e : any) => {
		state.isScrollTop = e.scrollTop > 10;
	})

	onLoad(async (query : QueryParams) => {
		getPageConfig(query?.code);
		if (uni.getStorageSync(UserToken)) {
			getUserInfo();
		}
        
		state.shareUrl = await getShareUrl({
			client: ShareClientEnum.wxMiNiProgram,
			url: shareUrl,
			type: ShareModelEnum.url,
			page: ShareEnum.page,
            params: { pageCode: query?.code, } 
		})
	})

	const getPageConfig = async (code : string) => {
		const pageConfig : Response<PageConfigType> = await queryPageConfig({ code, });
		state.coreshopData = pageConfig.data.items;
	}

	/** 获取用户信息 */
	const getUserInfo = async () => {
		const userInfo : Response<UserInfoType> = await queryUserInfo();
		if (userInfo.status) {
			userInfoStore.setUserInfo(userInfo?.data);
		}
	}

	/** 分享 */
	onShareAppMessage(() => {
		return {
			title: getDefaultShareData().title,
			imageUrl: getDefaultShareData().imageUrl,
			path: state.shareUrl
		}
	});
	onShareTimeline(() => {
		return {
			title: getDefaultShareData().title,
			imageUrl: getDefaultShareData().imageUrl,
			path: state.shareUrl
		}
	});
</script>

<style lang="scss" scoped>
	@import './custom.scss';
</style>